<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>PlayVideo</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
  </style>
</head>
<body>

<!--<nav class="navbar navbar-inverse">-->
<!--    <div class="container-fluid">-->
<!--        <div class="navbar-header">-->
<!--            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--                <span class="icon-bar"></span>-->
<!--            </button>-->
<!--            <a class="navbar-brand" href="#">主页</a>-->
<!--        </div>-->
<!--        <div class="collapse navbar-collapse" id="myNavbar">-->
<!--            <ul class="nav navbar-nav">-->
<!--                <li class="active"><a href="#">直播</a></li>-->
<!--                <li><a href="#">电影</a></li>-->
<!--                <li><a href="#">电视剧</a></li>-->
<!--                <li><a href="#">小视频</a></li>-->
<!--                -->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
<!--</nav>-->

<div th:replace="fragment/nav::nav"></div>

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <h3 th:text="${media.mediaName}"></h3>

<!--            <img th:src="@{/image/李婧/头像.jpg}"  height="200px">
            <img th:src="@{/image/李婧/播放视频2.png}" height="400px">-->
<!--            <meta name="viewport" content="width=device-width, initial-scale=0.5">
            <title>Document</title></head><body>-->
        <video th:src="@{/image/李婧/video1.mp4}" controls> 请升级你的浏览器！ </video>

        <i class="bi bi-arrow-down-circle"></i>
        <i class="icon ion-heart"></i>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#downloadVideoModal">
            下载视频
        </button>
            <ul class="nav nav-pills nav-stacked">
            <form role="form">
                <div class="form-group">
                    <strong><label for="name">发表一条友善的评论吧~</label></strong>
                    <!--<textarea class="form-control" rows="3"></textarea>-->

                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="请输入评论" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">发表</button>
                        </div>
                    </div>

                </div>
            </form>
                <h4><li class="active"><a href="#">精彩评论</a></li></h4>
                <ul class="list-group" th:each="comment:${commentList}"></ul>

                <p>诺诺：我们都是唯物主义者，但是就我们俩，我还是希望有下辈子.</p>
                <p>陈宇：我小时候很肤浅，觉得邓奶奶不够美，长大了觉得他们的爱情简直是人间理想，才知道什么是真爱，邓奶奶美得灵魂都在发光.</p>
                <p>杰：我一生都是坚定不移的唯物主义者，除了和你我希望有下辈子,纸短情长……看看这是什么神仙爱情.</p>
<!--            <li><a href="#">我的专栏</a></li>-->
<!--                <p></p>-->
<!--                <li><a href="#">我的合集和视频列表</a></li>-->
<!--                <p></p>-->
<!--                <li><a href="#">我的收藏夹</a></li>-->
<!--                <p></p>-->
<!--                <li><a href="#">最近点赞的视频</a></li>-->

            </ul>
            <hr class="hidden-sm hidden-md hidden-lg">
        </div>
        <div class="col-sm-4">

            <!--<h3>user的其他视频</h3>



                    <img th:src="@{/image/李婧/播放视频1.png}" height="200px">
                    <p>甄嬛将何去何从</p>
                    <img th:src="@{/image/李婧/视频播放3.png}" height="200px">
                    <p>天 宫 奇 遇 记 ：当“云宫迅音”遇上中国航天……</p>
                    <img th:src="@{/image/李婧/视频播放4.png}" height="200px">
                    <p>起飞！我国7次载人航天飞行高光时刻（2003.10-2021.9</p>
        -->

                </div>
            </div>
        </div>

        <div class="jumbotron text-center" style="margin-bottom:0">
            <div th:replace="fragment/model::download_video(${media.mediaId})"></div>
        </div>

<div th:replace="fragment/model::model_login"></div>
<div th:replace="fragment/model::model_register"></div>
<div th:replace="fragment/model::script_login"></div>
<div th:replace="fragment/model::script_register"></div>
<div th:replace="fragment/model::script_register_login"></div>





        </body>
        </html>